<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home Page of Business Refactoring Service</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>
    <body>
        <div id="app">
            <el-card>
                <div slot="header">
                    <span>{{component.rname}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="handleCreateDlg(true)">去创建
                    </el-button>
                </div>
                <div style="font-size: 0.875rem;margin-bottom: 1.125rem;">
                    <span>{{component.description}}</span>
                </div>
            </el-card>
            <br />
            <el-table :data="rulelist" style="width: 100%;margin-bottom: 20px;" border highlight-current-row stripe
                :default-sort="{prop: 'rname', order: 'ascending'}">
                <el-table-column property="rname" label="名称" sortable></el-table-column>
                <el-table-column label="规则代码" sortable>
                    <template slot-scope="scope">
                        {{scope.row.rpath.substr(scope.row.rpath.indexOf('/')+1)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100px">
                    <template slot-scope="scope">
                        <el-button size='mini' type='primary' @click="handleEdit(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <script type='module'>
            import * as $util from '../lib/hc-util.js'
            import * as $rest from '../lib/hc-rest-service.js'
            import HcRuleCreationDialog from '../com/hc-rule-creation-dialog.js'
            
            var rtype = $util.getUrlArgOrDefault('rtype','project');
            $rest.check$pinfoOrLoad(onready, 'xsxdjc/Main');
            function onready() {
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        rtype: rtype,
                        component: $config.componentMap[rtype],
                        rulelist: $pinfo.ruleList.filter(it => it.rtype == rtype),
                    },
                    methods: {
                        handleEdit(rule) {
                            let url = this.component.objectpage;
                            url = url.replace('${rpath}', encodeURI(rule.rpath));
                            if (window.top.$workbench) {
                                window.top.$workbench.openPage({
                                    url: url,
                                    title: rule.rname,
                                    tag: "rpath@" + rule.rpath,
                                }, true);

                            } else document.location.href = url;
                        },
                        handleCreateDlg: function(showing) {
                            this.creationDlg.vm.visible = showing;
                            if (showing) {
                                let count = 0;
                                let rtype = this.rtype;
                                if ($pinfo) {
                                    count = $pinfo.ruleList.filter(it => it.rtype == rtype).length;
                                }
                                this.creationDlg.vm.formdata.name = this.component.rname + (count + 1);
                                this.creationDlg.vm.selectName()
                            }
                        },
                        doCreate: function(val) {
                            let ruleInfo = {};
                            ruleInfo.rtype = this.rtype;
                            ruleInfo.rname = val.name;
                             let pcode = $pinfo.rpath
                             if (pcode.lastIndexOf('/') >= 0) {
                                 pcode = pcode.substr(0, pcode.lastIndexOf('/'))
                             }
                             ruleInfo.rpath = pcode + "/" + val.code;
                          
                          let self = this;
                          $rest.create(ruleInfo,function(ruleDef){
                                window.top.$pinfo.add(ruleDef);
                                if (window.top.$workbench) {
                                    document.location.reload(true);
                                }
                                //forward to the edit page
                                self.handleEdit(ruleDef)
                          });
                        },
                    },
                    creationDlg: {},
                    mounted: function() {
                        let thisvm = this;
                        this.creationDlg = new HcRuleCreationDialog({
                            type: thisvm.rtype,
                            visible: false,
                            confirmed: function(val) {
                                thisvm.doCreate(val)
                            }
                        })
                    }
                });
            }
        </script>
    </body>
</html>
